<script lang="ts" setup>
import {
  getOneByCondition,
  getReadonly,
  insertOne,
  reSetDialogModel,
  updateOne,
  urls
} from '@/index';

import type { DialogModel, EquipmentUtProbeType, NdeCertificationMethod } from '@/index.d';

import type { FormInstance, FormRules } from 'element-plus';

const dialogModel = defineModel<DialogModel<EquipmentUtProbeType>>('dialogModel', {
  required: true
});

const { insertForbidden, updateForbidden } = getReadonly(dialogModel.value);

const formData = reactive<EquipmentUtProbeType>({
  id: 0
});

const setFormData = async (res: EquipmentUtProbeType) => {
  formData.id = res.id;
  formData.creator = res.creator;
  formData.createTime = res.createTime;
  formData.updater = res.updater;
  formData.updateTime = res.updateTime;
  formData.probeName = res.probeName;
  formData.probeBrand = res.probeBrand;
  formData.probeKind = res.probeKind;
  formData.probeAngle = res.probeAngle;
  formData.probeWaveType = res.probeWaveType;
  formData.probeElementSize = res.probeElementSize;
  formData.probeFrequency = res.probeFrequency;
  formData.probeFocus = res.probeFocus;
  formData.probeNote = res.probeNote;
};

const reSetFormData = () => {
  reSetDialogModel(dialogModel);
  formData.id = 0;
  delete formData.probeName;
  delete formData.probeBrand;
  delete formData.probeKind;
  delete formData.probeAngle;
  delete formData.probeWaveType;
  delete formData.probeElementSize;
  delete formData.probeFrequency;
  delete formData.probeFocus;
  delete formData.probeNote;
};

watch(
  () => dialogModel.value.visible,
  value => {
    value && (formData.id = dialogModel.value.id as number);
    !value && reSetFormData();
  },
  {
    immediate: true
  }
);

watch(
  () => formData.id,
  async (value: number | undefined) => {
    if (value) {
      const res = await getOneByCondition<EquipmentUtProbeType>(
        urls.equipmentUtProbeType,
        'id',
        value
      );
      res && setFormData(res);
    }
  },
  {
    immediate: true
  }
);

const formDataRef = useTemplateRef<FormInstance>('formDataRef');

interface FormDataRules {
  probeName: string;
  probeBrand: NdeCertificationMethod;
  probeKind: string;
  probeAngle?: string;
  probeWaveType?: string;
  probeElementSize?: string;
  probeFrequency?: string;
  probeFocus?: string;
  probeNote?: string;
}

const formDataRules = computed(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return reactive({});

    case 'update':
      return reactive<FormRules<FormDataRules>>({
        probeName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeBrand: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeKind: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeAngle: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeWaveType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeElementSize: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeFrequency: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeFocus: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeNote: [{ required: true, message: '不能为空', trigger: 'blur' }]
      });

    case 'insert':
      return reactive<FormRules<FormDataRules>>({
        probeName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeBrand: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeKind: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeAngle: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeWaveType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeElementSize: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeFrequency: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeFocus: [{ required: true, message: '不能为空', trigger: 'blur' }],
        probeNote: [{ required: true, message: '不能为空', trigger: 'blur' }]
      });
  }
});

const saveFormData = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl
    .validate()
    .then(async valid => {
      if (valid) {
        if (dialogModel.value.id === 0) {
          const res = (await insertOne<EquipmentUtProbeType>(
            urls.equipmentUtProbeType,
            formData
          )) as EquipmentUtProbeType;
          if (res) {
            setFormData(res);
            dialogModel.value.id = res.id as number;
            dialogModel.value.type = 'update';
            dialogModel.value.change = true;
          }
        } else {
          const tempFormData: EquipmentUtProbeType = {
            id: formData.id,
            probeName: formData.probeName,
            probeBrand: formData.probeBrand,
            probeKind: formData.probeKind,
            probeAngle: formData.probeAngle,
            probeWaveType: formData.probeWaveType,
            probeElementSize: formData.probeElementSize,
            probeFrequency: formData.probeFrequency,
            probeFocus: formData.probeFocus,
            probeNote: formData.probeNote
          };

          const res = (await updateOne<EquipmentUtProbeType>(
            urls.equipmentUtProbeType,
            tempFormData
          )) as EquipmentUtProbeType;

          if (res) {
            dialogModel.value.change = true;
            formData.updater = res.updater;
            formData.updateTime = res.updateTime;
          }
        }
      }
    })
    .catch(res => console.log(res));
};
</script>
<template>
  <HqDialogDetail
    :dialog-model="dialogModel"
    @submit="saveFormData(formDataRef as FormInstance)"
    operate-record
    :operation="formData"
  >
    <template #default>
      <el-card shadow="hover">
        <template #header>基本信息</template>
        <template #default>
          <hq-form :model="formData" ref="formDataRef" :rules="formDataRules">
            <el-row :gutter="5">
              <hq-col v-show="false">
                <el-form-item label="id" prop="id">
                  <el-input v-model="formData.id" readonly />
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="名称" prop="probeName">
                  <el-input v-model="formData.probeName" :readonly="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="品牌" prop="probeBrand">
                  <el-select v-model="formData.probeBrand" :disabled="updateForbidden">
                    <HqDictionary type-text="超声探头品牌" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="种类" prop="probeKind">
                  <el-select v-model="formData.probeKind" :disabled="updateForbidden">
                    <el-option value="单晶" label="单晶" />
                    <el-option value="双晶" label="双晶" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="角度" prop="probeAngle">
                  <el-input-number
                    v-model="formData.probeAngle"
                    :readonly="updateForbidden"
                    controls-position="right"
                    :min="0"
                    :max="90"
                    :step="0.01"
                  >
                    <template #suffix>°</template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="折射波形" prop="probeWaveType">
                  <el-select v-model="formData.probeWaveType" :disabled="updateForbidden">
                    <el-option value="纵波" label="纵波" />
                    <el-option value="横波" label="横波" />
                    <el-option value="板波" label="板波" />
                    <el-option value="表面波" label="表面波" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="晶片尺寸" prop="probeElementSize">
                  <el-input v-model="formData.probeElementSize" :readonly="updateForbidden">
                    <template #suffix>mm</template>
                  </el-input>
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="频率" prop="probeFrequency">
                  <el-input-number
                    v-model="formData.probeFrequency"
                    :readonly="updateForbidden"
                    controls-position="right"
                    :min="0"
                    :max="10"
                    :step="0.01"
                  >
                    <template #suffix>MHz</template>
                  </el-input-number>
                </el-form-item>
              </hq-col>
              <hq-col v-show="true">
                <el-form-item label="焦点" prop="probeFocus">
                  <el-input v-model="formData.probeFocus" :readonly="updateForbidden">
                    <template #suffix>mm</template>
                  </el-input>
                </el-form-item>
              </hq-col>
            </el-row>
          </hq-form>
        </template>
      </el-card>
    </template>
  </HqDialogDetail>
</template>
<style lang="scss" scoped></style>
